<!-- GPT -->
<template>
  <div class="app-container">
    <div class="page p-3">
      <div class="tabBox">
        <div class="item" :class="{ 'active': tabIndex == 0 }" @click="tabChange(0)">全部
          <div v-if="tabIndex == 0" class="line"></div>
        </div>
        <div class="item" :class="{ 'active': tabIndex == 1 }" @click="tabChange(1)">售卖中
          <div v-if="tabIndex == 1" class="line"></div>
        </div>
        <div class="item" :class="{ 'active': tabIndex == 2 }" @click="tabChange(2)">已下架
          <div v-if="tabIndex == 2" class="line"></div>
        </div>
        <div class="item" :class="{ 'active': tabIndex == 3 }" @click="tabChange(3)">已封禁
          <div v-if="tabIndex == 3" class="line"></div>
        </div>
        <div class="item" :class="{ 'active': tabIndex == 4 }" @click="tabChange(4)">审核中
          <div v-if="tabIndex == 4" class="line"></div>
        </div>
        <div class="item" :class="{ 'active': tabIndex == 5 }" @click="tabChange(5)">审核驳回
          <div v-if="tabIndex == 5" class="line"></div>
        </div>
      </div>
      <el-form style="width: 100%;" class="mt-5" ref="queryFormRef" :model="queryParams">
        <el-row :gutter="40">
          <el-col :span="8" :xs="24">
            <el-form-item prop="goodsName" label="商品名称" style="width: 100%;">
              <el-input v-model="queryParams.goodsName" clearable @keyup.enter="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="商品分类" prop="storeGoodsCategory" style="width: 100%;">
              <el-select v-model="queryParams.storeGoodsCategory" placeholder="全部" style="width: 100%;" clearable>
                <el-option label="正常" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item prop="createDate" label="创建时间" style="width: 100%;">
              <el-date-picker :editable="false" v-model="queryParams.createDate" type="date" style="width: 100%;"
                placeholder="创建时间" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="display: flex; justify-content: center">
            <el-form-item>
              <div style="width: 100%; display: flex; justify-content: center;">
                <el-button type="primary" @click="handleQuery">
                  <i-ep-search />
                  搜索
                </el-button>
                <el-button @click="handleResetQuery">
                  <i-ep-refresh />
                  重置
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="toolsBox">
        <div class="lt">
          <div class="total">已选{{ ids.length }}条</div>
          <div class="tLine"></div>
          <div class="toolBtn" @click="batchUpdateGoods('on')">批量上架</div>
          <div class="toolBtn">批量删除</div>
        </div>
        <div class="rt">
          <el-icon color="#fff" size="16px" class="mr-1">
            <Plus />
          </el-icon>
          新建商品
        </div>
      </div>
      <el-table v-loading="loading" :data="pageData" ref="table" empty-text="暂无数据" class="orderData" :header-cell-style="{
        backgroundColor: '#f2f4f9',
        fontSize: '14px',
        color: '#333',
      }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="商品信息" width="250">
          <template #default="scope">
            <div class="goodBox">
              <div class="tab">
                <img class="img" src="@/assets/images/tx.png" alt="" />
                <!-- <el-tooltip placement="top" :show-after="300">
                  <template #content>
                    <div>
                      <span>商品名称：</span>
                      <span>
                        {{
                          scope.row.name
                        }}
                      </span>
                    </div>

                  </template>
<span class="line2 w-250">
  {{ scope.row.name }}
</span>
</el-tooltip> -->
                <span class="line2 w-250">
                  {{ scope.row.name }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="module" width="240" align="center">
          <template #default="scope">
            <div style="display: flex; justify-content: center">
              <div class="payment">
                <div class="price">￥{{ scope.row.price / 100 }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="销售量" width="120" align="center">
          <template #default="scope">
            <div>
              {{ scope.row.buyCount }}件
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总库存" width="120" align="center">
          <template #default="scope">
            <div>
              {{ scope.row.stock }}件
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="240" align="center" />
        <el-table-column label="商品状态" prop="region" width="120" align="center">
          <div class="state">
            <div class="cir mr-1"></div>
            已发货
          </div>
        </el-table-column>
        <el-table-column label="操作" min-width="120" align="center">
          <template #default="scope">
            <div class="czBox">
              <div class="czitem">编辑</div>
              <div v-if="scope.row.status == 2" class="czitem" @click="updateGoods(scope.row.goodsId, 'on')">上架</div>
              <div v-if="scope.row.status == 1" class="czitem" @click="updateGoods(scope.row.goodsId, 'off')">下架</div>
              <div @click="updateGoods(scope.row.goodsId, 'del')" class="czitem">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: center" class="pt-2">
        <el-pagination v-if="total > 0" v-model:current-page="queryParams.page" v-model:page-size="queryParams.limit"
          :page-sizes="[10, 20, 50, 100]" layout="total,  prev, pager, next,sizes, jumper" :total="total" background
          small @change="handleQuery" />
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import GoodsAPI, { GoodsPageQuery } from "@/api/goods";
const queryFormRef = ref(ElForm);
const tabIndex = ref(0)
const loading = ref(false);
const total = ref(0);
const ids = ref([]);
// 商品表格数据
const pageData = ref([]);
const queryParams = reactive<GoodsPageQuery>({
  goodsName: '',
  storeGoodsCategory: "",
  createDate: '',
  page: 1,
  limit: 10,
});
function tabChange(index = 0) {
  tabIndex.value = index
}
/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.goodsId);
}
/** 查询 */
function handleQuery() {
  loading.value = true;
  GoodsAPI.getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = +data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.page = 1;
  queryParams.createDate = undefined;
  handleQuery();
}
onMounted(() => {
  handleQuery();
});
/**更新商品状态 */
async function updateGoods(id: any, od: any) {
  await GoodsAPI.editAddressDetail({ goodsId: id, op: od })
  handleQuery()
}
/*批量更新商品状态 */
async function batchUpdateGoods(op: string) {
  if (ids.value.length == 0) {
    ElMessage.warning("请选择商品");
    return
  }
  await GoodsAPI.batchEditGoods({ array: ids.value, op: op })
  handleQuery()
}
</script>

<style lang="scss" scoped>
.czBox {
  display: flex;
  justify-content: center;

  .czitem {
    color: #1F75EC;
    font-weight: 400;
    margin-left: 20px;
    cursor: pointer;

    &:first-child {
      margin-left: 0;
    }
  }
}

.tab {
  display: flex;
  align-items: center;
  margin-top: 10px;

  .img {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
}

.goodBox .tab:first-child {
  margin-top: 0;
}

.orderData {
  font-size: 14px;
  font-weight: 500;
  color: #333
}

.state {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #333333;

  .cir {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1f75ec;
  }
}

.toolsBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;

  .lt {
    display: flex;
    align-items: center;

    .total {
      font-size: 14px;
      font-weight: 500;
      color: #333333;
    }

    .tLine {
      width: 1px;
      height: 36px;
      background-color: #D3D9DD;
      margin: 0 20px;
    }

    .toolBtn {
      cursor: pointer;
      width: 80px;
      height: 32px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #D3D9DD;
      margin-right: 20px;
    }
  }

  .rt {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    width: 142px;
    height: 32px;
    background-color: #2076ec;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/** 关闭tag标签  */
.app-container {
  /* 50px = navbar = 50px */
  min-height: calc(100vh - 64px);
}

/** 开启tag标签  */
.hasTagsView {
  .app-container {
    /* 84px = navbar + tags-view = 50px + 34px */
    min-height: calc(100vh - 98px);
  }
}

.page {
  background-color: #fff;
}

.tabBox {
  display: flex;
  align-items: center;

  .item {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin-right: 35px;
    position: relative;

    .line {
      width: 70%;
      height: 2px;
      background-color: #1F75EC;
      position: absolute;
      left: 50%;
      bottom: -4px;
      transform: translateX(-50%);
    }
  }

  .active {
    font-size: 16px;
    font-weight: 600;
    color: #1F75EC;
  }
}
</style>
